class Slider {

    constructor(id,cycle=3000) {
        this.container = document.getElementById(id);
        this.items = this.container.querySelectorAll('.slide_list_item, .slide_list_item_selected');
        this.cycle = cycle

        const controller = this.container.querySelector('.slide_list__control');
        if(controller){
            const buttons =  controller.querySelectorAll('slide_list__control_buttons, slide_list__control_buttons_selected')

            controller.addEventListener('mouseover',evt=>{
                const idx =  Array.from(buttons).indexOf(evt.target);
                if(idx >=0){
                    this.slideTo(idx);
                    this.stop();
                }
            })
        }

        controller.addEventListener('mouseout',evt=>{
            this.start();
        });

        this.container.addEventListener('slide',evt=>{
            const idx = evt.detail.index
            const selected = controller.querySelector('slide_list__control_buttons_selected')
            if(selected) selected.className= 'slide_list__control_buttons';
            buttons[idx] = className='slide_list__control_buttons_selected';
        })
        //左右两个箭头
        const previous = this.container.querySelector('.slide_list__previous');
        if(previous){
            previous.addEventListener('click', evt =>{
                this.stop();
                this.slidePrevious();
                this.start();
                evt.preventDefault();
            });
        }
        const next = this.container.querySelector('.slide_list__next');
        if(next){
            next.addEventListener('click', evt =>{
                this.stop();
                this.slideNext();
                this.start();
                evt.preventDefault();
            });
        }
    }
    getSelectedItem() {
        const selected = this.container.querySelector('.slide_list_item_selected');
        return selected;
    }
    getSelectedItemIndex() {
        return Array.from(this.items).indexOf(this.getSelectedItem());
    }
    slideTo(idx) {
        const selected = this.getSelectedItem();
        if(selected) {
            selected.className = 'slide_list_item';
        }
        const item = this.items[idx];
        if(item) {
            item.className = 'slide_list_item_selected';
        }        
        const detail = {index: idx}
        const event = new CustomEvent('slide',{bubbles:true,detail})
        this.container.dispatchEvent(event)
    }
    slideNext() {
        const currentIdx = this.getSelectedItemIndex();
        const nextIdx = (currentIdx + 1) % this.items.length;
        this.slideTo(nextIdx);  
    }
    slidePrevious() {
        const currentIdx = this.getSelectedItemIndex();
        const preIdx = (currentIdx +this.items.length-1) % this.items.length;
        this.slideTo(preIdx);
    }
    start(){
        this.stop();
        this._timer = setInterval(()=>this.slideNext(),this.cycle);
    }
    stop(){
        clearInterval(this._timer);
    }   

}
const slider = new Slider('my-slider');
slider.start();